<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
    <style>
        span{
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 20px;
            cursor: pointer;
        }
        .active{
            color: red;
        }
    </style>
</head>
<body>

    <div class="control">
        <div class="classRoom"></div>
        <div class="sex"> <span class="active">全部</span> <span>男</span> <span>女</span></div>
        <div class="status"></div>
    </div>

    <ul class="list">

    </ul>

    <script>

        // 请求所有的数据
        axios.get('/allStudent').then(result => {
            renderNav(result.data);     // 渲染导航
            render(result.data.data);   // 渲染列表
        });

        let control = document.querySelector('.control');
        let list = document.querySelector('.list');
        function renderNav(data){
            control.children[0].innerHTML = data.classRoom.map( (item,index) => `<span class='${index === 0 ? 'active' : ''}'>${item}</span>`).join('');
            control.children[2].innerHTML = data.state.map( (item,index) => `<span class=${index=== 0 ? 'active' : ''}>${item}</span>`).join('');
        }
        function render(data){
            list.innerHTML = data.map(item => `<li>${item.name} --- ${item.age} --- ${item.sex} --- ${item.classRoom} --- ${item.state}</li>`).join('');
        }

        // 给span添加点击事件
        control.onclick = function(e){
            let tar = e.target;
            if(tar.tagName === 'SPAN'){
                // 高亮处理
                let active = tar.parentNode.querySelector('.active');
                active.classList.remove('active');
                tar.classList.add('active');
                // 请求服务器数据
                // 把班级 , 性别, 状态 都要上传到服务器
                axios.post('/filterStudent', {
                    classRoom : control.children[0].querySelector('.active').innerHTML,
                    sex : control.children[1].querySelector('.active').innerHTML,
                    state : control.children[2].querySelector('.active').innerHTML,
                }).then(result => {
                    render(result.data)
                })
            }
        }

    </script>
</body>
</html>